<template>
  <div class="gridArea">
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover" class="m-l">
          <div slot="header" class="clearfix">
            <span class="link-title">所有网格</span>
          </div>
          <el-row type="flex" justify="space-around">
            <el-col :span="8">
              <el-input v-model="grid" placeholder="请输入内容">
                <el-select slot="prepend" v-model="select" placeholder="请选择">
                  <el-option label="南浔镇" value="1" />
                </el-select>
                <el-button slot="append" icon="el-icon-search" />
              </el-input>
            </el-col>
            <el-col :span="2">
              <el-button icon="el-icon-download" type="primary">导出</el-button>
            </el-col>
            <el-col :span="2">
              <el-button
                icon="el-icon-circle-plus"
                type="primary"
              >添加网格</el-button>
            </el-col>
          </el-row>
          <el-row class="mt-l">
            <el-table
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="gridTable"
              border
              class="width"
            >
              <el-table-column prop="name" label="网格名称" align="center" />
              <el-table-column prop="grid" label="驿站数" align="center" />
              <el-table-column
                prop="principal.name"
                label="网格类型"
                align="center"
              />
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="info"
                    @click="handleTo(scope.row.id, 1)"
                  >详情</el-button>
                  <el-button
                    size="mini"
                    type="warning"
                    @click="handleTo(scope.row.id, 2)"
                  >编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="del(scope.$index, scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page.sync="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import grids from '../data/grid.js'
export default {
  components: {},
  data() {
    return {
      grid: '',
      select: '1',
      gridTable: [],
      loading: true,
      // 分页
      currentPage: 1,
      total: 0
    }
  },
  computed: {},
  created() {
    this.getGrid()
  },
  mounted() {},
  methods: {
    // 获取所有网格
    getGrid() {
      this.gridTable = grids
      this.loading = false
    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep .el-select .el-input {
  width: 120px;
}
</style>
